<template>
  <view
    class="v-tabbar-item"
    @click="clickHandle"
  >
    <v-icon
      :active="isActive"
      :active-src="activeIcon"
      :src="icon"
      :custom-style="{ height: '48rpx', width: '48rpx' }"
    />
    <view
      class="label"
      :class="{ active: isActive }"
    >
      <text>{{ label }}</text>
    </view>
  </view>
</template>

<script lang="ts" setup>
const props = defineProps<{
  // 判断是否当前页
  activeRoute: string;
  // 跳转路径
  url: string;
  // 名称
  label: string;
  // 非激活图标路径
  icon: string;
  // 激活图标路径
  activeIcon: string;
}>();

const url = toRef(props, 'url');
const activeRoute = toRef(props, 'activeRoute');
const isActive = computed(() => {
  return url.value === `/${activeRoute.value}`;
});

const clickHandle = () => {
  uni.switchTab({ url: url.value });
};
</script>

<style lang="scss" scoped>
.v-tabbar-item {
  height: 110rpx;
  padding: 10rpx;
  box-sizing: border-box;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6rpx;
  .label {
    font-size: 20rpx;
    &.active {
      color: #ff2f3b;
    }
  }
}
</style>
